<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .div-box {
        margin: auto;
        width: 616px;
      }
      .div-box div {
        margin: 1px;
        width: 200px;
        height: 200px;
        background: #98bf21;
        float: left;
        border: 1px saddlebrown solid;
        position: relative;
      }
      .mask {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        display: none;
      }
    </style>
    <script src="./jquery.js"></script>
  </head>
  <body>
    <div class="div-box">
      <div>
        <p class="mask">0</p>
      </div>
      <div>
        <p class="mask">1</p>
      </div>
      <div>
        <p class="mask">2</p>
      </div>
      <div>
        <p class="mask">3</p>
      </div>
      <div id="start">开始</div>
      <div>
        <p class="mask">4</p>
      </div>
      <div>
        <p class="mask">5</p>
      </div>
      <div>
        <p class="mask">6</p>
      </div>
      <div>
        <p class="mask">7</p>
      </div>
    </div>
  </body>
  <script>
    $(function () {
      $('#start').click(fun)
    })
    var index = 0, //初始化下标
      indexArr = [0, 1, 2, 4, 7, 6, 5, 3],
      num = 10, //转圈次数
      speed = 50, //初始化速度
      n //随机一个奖品下标
    function fun() {
      n = randomNum(0, 7) //随机一个奖品下标
      console.log(n)
      funStart()
    }
    function funStart() {
      if (index == 8 && num > 0) {
        num--
        index = 0
        speed = speed > 1000 ? 1000 : speed + 10
      }
      if (num == 0 && index == n) {
        //转圈次数已经完成 现在是0 并且随机的下标和当前转圈的下标一样
        $('p').hide().eq(indexArr[index]).show()
        index = 0 //恢复初始化
        num = 3 //恢复初始化转圈次数
        return
      }
      $('p')
        .hide()
        .eq(indexArr[index++])
        .show()
      setTimeout(funStart, speed)
    }

    //指定范围随机数
    function randomNum(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min)
    }
  </script>
</html>
